<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易计算器</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #counter {
            width: 400px;
            height: 470px;
            background: linear-gradient(to bottom, #e99f64 0%, #86890c 100%);
            margin: 50px auto 0;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
        }

        #counter h2 {
            line-height: 42px;
            /* padding-left: 15px; */
            font-size: 24px;
            font-family: arial;
            color: #fff;
            text-align: center;
            margin-top: 50px;
            letter-spacing: 3px;
        }

        #counter a {
            font-weight: normal;
            text-decoration: none;
            color: #ff3333;
        }

        #counter a:hover {
            text-decoration: underline;
        }

        #bg {
            width: 280px;
            height: 200px;
            border: 3px solid #680023;
            background: #990033;
            filter: alpha(opacity=80);
            opacity: 0.8;
            position: absolute;
            left: 50%;
            top: 115px;
            margin-left: -141px;
        }

        #counter_content {
            width: 250px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -45%);
            z-index: 1;
        }

        #counter_content h3 {
            margin-bottom: 10px;
        }

        #counter_content h3 input {
            border: none;
            width: 223px;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            background: url(img/ico.png) no-repeat;
            text-align: right;
            color: #333;
            font-size: 14px;
            font-weight: bold;
        }

        #counter_content div {
            width: 250px;
        }

        #counter_content input {
            width: 60px;
            height: 30px;
            line-height: 30px;
            float: left;
            background: url(img/ico.png) no-repeat -303px 0;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin: 0 1px 4px 0;
            border: 0;
        }

        #counter_content div>input:hover {
            background: url(img/ico.png) no-repeat -243px 0;
        }

        #counter p {
            width: 500px;
            position: absolute;
            bottom: 20px;
            left: 0;
            color: #ff3333;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="counter">
        <h2>简易计算器</h2>
        <div id="counter_content">
            <h3><input id="result" type="text" value="0" /></h3>
            <div id="div1">
                <input type="button" value="7" onclick="kick('7')" />
                <input type="button" value="8" onclick="kick('8')" />
                <input type="button" value="9" onclick="kick('9')" />
                <input type="button" value="+" onclick="kick('+')" />
                <input type="button" value="4" onclick="kick('4')" />
                <input type="button" value="5" onclick="kick('5')" />
                <input type="button" value="6" onclick="kick('6')" />
                <input type="button" value="-" onclick="kick('-')" />
                <input type="button" value="1" onclick="kick('1')" />
                <input type="button" value="2" onclick="kick('2')" />
                <input type="button" value="3" onclick="kick('3')" />
                <input type="button" value="*" onclick="kick('*')" />
                <input type="button" value="0" onclick="kick('0')" />
                <input type="button" value="C" onclick="kick('C')" />
                <input type="button" value="=" onclick="kick('=')" />
                <input type="button" value="/" onclick="kick('/')" />
            </div>
        </div>
    </div>

    <!-- 点击时执行函数fn('hello')  => JS解析引擎将字符串中的代码作为JS语句执行 -->
    <!-- <button onclick="fn('hello')">点我有惊喜</button> -->
</body>
<script>
    // function fn(con) {
    //     alert("fn被点击:" + con)
    // }

    var resultInp = document.getElementById("result");

    // 按钮 x 16 => 获取元素绑定事件 x16 => 太麻烦 
    // 怎么解决 => 写成内联事件 =>  16个按钮都出同一个函数 => 将对应的功能符号作为参数传入

    // 计算器的实现
    // 1 + 1 = 2

    // (1) 先输入第一个数
    // (2) 输入运算符
    // (3) 在输入第二个数
    // (4) 点击等号输出结果


    var type = null;
    var prevNum = null;
    var isPressOperator = false; //是否按下运算符 (没有)


    function kick(val) { // 形参 => 对应接收实际参数
        // console.log(val);
        // 对计算器的符号进行分类
        // 1. 数字
        // 2. 运算符
        // 3. 等号
        // 4. 清除C

        debugger;
        switch (val) {
            case "+":
            case "-":
            case "*":
            case "/":
                console.log("运算符", val);

                type = val; //记录被按下的运算符
                prevNum = resultInp.value; // 用prevNum记录输入的第一个数
                isPressOperator = true;  // 用变量记录状态 => 已经按下的运算符
                break;
            case "=":
                console.log("等号", val);
                // 计算结果 第一个数(prevNum) 运算符(type) 第二个数(resultInp.value)
                var result = calc(prevNum, type, resultInp.value);
                resultInp.value = result;

                break;
            case "C":
                console.log("清除", val);

                resultInp.value = 0;
                type = null;
                prevNum = null;
                isPressOperator = false; //是否按下运算符 (没有)

                break;
            default:
                console.log("数字", val); //输入的值


                // resultInp.value == 0 此时输入框的值为初始值  => 将值赋值为"" => 拼接按下的第一个值
                // 如果已经按下了运算符 -> 在输入数字时也要清空
                if (resultInp.value == 0 || isPressOperator == true) {
                    resultInp.value = "";
                }
                resultInp.value = resultInp.value + val;  //数字拼接  原本的 + 新的=>  1 + 2 => 12

                isPressOperator = false; // 第二个数已经开始输入 -> 可以重新拼接了
                break;
        }

    }

    // 两个数的运算符
    function calc(a, opt, b) {
        switch (opt) {
            case "+":
                return a * 1 + b * 1;
                break;
            case "-":
                return a - b;
                break;
            case "*":
                return a * b;
                break;
            case "/":
                return a / b;
                break;
        }
    }






    // 晚上任务
    // 1. 复习上午新增的知识点
    // 2. 断点
    // 3. 计算器(断点跑一边)
    
    // 数组作业!!!!



</script>

</html>